<!DOCTYPE html>
<html lang="en">

<head>
<?xml version="1.0" encoding="utf-8"?>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SAO Utils音频可视化网页客户端插件</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            text-align: center;
        }
    </style>
</head>

<body>
    <canvas id="cvs"></canvas>
    <script src="../ADVService.js"></script>
    <script>
        var settings = { 
            ip: "local",
            port: 5050,
            // 频谱线颜色
            line_color: "rgba(0,0,0,0.4)",
            //分界线的颜色
            center_color: "rgba(0,0,0,0.9)"
		};

        //引用插件
        var adv = new ADV_Plugin(settings.ip, settings.port);

        //画布
        var cvs = document.getElementById("cvs");
        var ctx = cvs.getContext("2d");

        //自适应
        window.onresize = function () {  
            cvs.width = window.innerWidth;  
            cvs.height = window.innerHeight;   
        };  
        window.onresize();  

        // Global Vars
        var peakValue = 20;
        var audioData = new Array(128);
        var animeData = new Array(128);

        // 初始化
        for (var i = 0; i < 128; i++) {
            audioData[i] = animeData[i] = 0;
        }

        
        //调用事件接口更新数据
        adv.ondata = function (data){
            //数据归一化
            var max = 0;
            for (var i = 0; i < 128; i++) {
                if (data[i] > max)
                    max = data[i];
            }

            peakValue = peakValue * 0.99 + max * 0.01;

            for (i = 0; i < 64; i++) {
                audioData[63 - i] = data[i] / peakValue;
            }

            for (i = 0; i < 64; i++) {
                audioData[127 - i] = data[127 - i] / peakValue;
            }
        };

        //更新画面
        function frame() {
            for (var i = 0; i < 128; i++) {
                animeData[i] += (audioData[i] - animeData[i]) * 0.3;
                animeData[i] = Math.min(animeData[i], 1);
            }

            //清空画布
            ctx.clearRect(0, 0, cvs.width, cvs.height);
            
            //分别为调整水平线倾斜角度,频谱倾斜角度,旋转角度
            //ctx.transform(1, 5 * (Math.PI / 180), 0, 1, 0, 0);
            //ctx.transform(0.9645, 0, -9 * (Math.PI / 180), 1, 0, 0);
            //ctx.rotate(7 * (Math.PI / 180));

            //分界线的颜色
            ctx.fillStyle = settings.center_color;
            //绘制分界线
            ctx.fillRect(0, cvs.height/2-1, cvs.width, 2);

            //频谱线颜色
            ctx.fillStyle = settings.line_color;

            //绘制频谱
            for (var i = 0; i < 128; i++) {
                ctx.fillRect((cvs.width/128) * i, ((cvs.height/2) - (cvs.height/2) * animeData[i]), Math.round(cvs.width/256), cvs.height * animeData[i]);
            }
            ctx.resetTransform();
            window.requestAnimationFrame(frame);
        }

        window.requestAnimationFrame(frame);
    </script>
</body>

</html>